<template>
  <Editor :plugins="plugins" :value="value" @change="handleChange" />
</template>
<script lang="ts" setup>
import gfm from "@bytemd/plugin-gfm";
import highlight from "@bytemd/plugin-highlight";
import { Editor, Viewer } from "@bytemd/vue-next";
import { ref, withDefaults, defineProps } from "vue";

/**
 * 定义组件属性类型
 */
interface Props {
  value: string;
  handleChange: (v: string) => void;
}

const plugins = [
  gfm(),
  highlight,
  // Add more plugins here
];

const props = withDefaults(defineProps<Props>(), {
  value: () => "",
  handleChange: (v: string) => {
    console.log(v);
  },
});
</script>
<style scoped>
/*去除git图标--*/
:deep(.bytemd-toolbar-icon.bytemd-tippy.bytemd-tippy-right:last-child) {
  display: none !important;
}
/*全屏或放大模式下会动态插入一个全屏遮罩层或浮层，*/
:deep(.bytemd-fullscreen.bytemd) {
  z-index: 9999 !important;
}
</style>
